<style scoped>
.gap {
  margin: 5px;
}
</style>
<template>
  <div style="margin-bottom: 81px">
    <div class="ivu-mt gap">
      <el-card :bordered="false">
        <p class="card-title">
          {{$t('message.term.interbank_offered_rate_kits') }}
        </p>
        <el-divider dashed />
        <el-form ref="form" :model="form" label-width="90px">
          <el-form-item :label="$t('message.term.amount_of_arrears')">
            <el-input v-model="form.amount_of_arrears"  @change="onRowParamChange()" :placeholder="$t('message.notice.input_money')" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item  :label="$t('message.term.start_and_end_date_of_interest')" style="width: 490px">
            <el-date-picker type="daterange" clearable :placeholder="$t('message.notice.pick_date2')"
                            format='yyyy-MM-dd' split-panels transfer @change="onRowParamChange()"unlink-panels
                            style="width:100%" v-model="form.duration"></el-date-picker>
          </el-form-item >
          <el-form-item :label="$t('message.term.debt_day_add_up')">
            {{form.days}}
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div style="margin: 30px 0">
      <el-button type="success" @click="sum()" long>{{$t('message.term.compute')}}</el-button>
    </div>

    <div class="ivu-mt gap">
      <el-card :bordered="false">
        <p class="card-title">
          合计
        </p>
        <el-divider dashed />
        <div style="font-size: 36px">
          {{result}} {{$t('message.term.yuan')}}
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { API } from '../../customized/http/api';
import Util from '../../customized/util/utils';


export default {
  components: {

  },
  data() {
    return {
      form: {
        amount_of_arrears: "",
        duration: [],
        days: 0
      },
      result: 0
    }
  },
  mounted() {
    this.$nextTick(() => {

    });
  },
  watch: {

  },
  computed: {

  },
  methods: {
    onRowParamChange() {
      let row = this.form;
      let duration = row.duration;
      if (!duration[0] || !duration[1]) return;
      let start = new Date(duration[0]).getTime();
      let end = new Date(duration[1]).getTime();

      let terminal;
      API.getTerminal()
        .then((response) => {
            terminal = response.data;
          let startTime = terminal[0];
          let endTime = terminal[1];
          let wing = new Date(startTime.substring(0,4),startTime.substring(5,7)-1,startTime.substring(8,10)).getTime();
          let fan = new Date(endTime.substring(0,4),endTime.substring(5,7)-1,endTime.substring(8,10)).getTime();
          if(end > fan){
            this.$message.error('该时间段暂不支持，暂支持 '+ startTime + ' 到 '+ endTime);
            return;
          }
          if(start < wing){
            this.$message.error('该时间段暂不支持，暂支持 '+ startTime + ' 到 '+ endTime);
            return;
          }
        }).catch((error) => {
        console.log(error);
      });
      // let startTime = terminal[0];
      // let endTime = terminal[1];
      // let wing = new Date(startTime.substring(0,4),startTime.substring(5,7),startTime.substring(8,10)).getTime();
      // let fan = new Date(endTime.substring(0,4),endTime.substring(5,7),endTime.substring(8,10)).getTime();

      // if (end < start) {
      //   this.$Notice.error({
      //     title: this.$t('message.term.illegal_parameter'),
      //     desc: this.$t('message.term.start_date_must_before_deadline')
      //   });
      //   return;
      // }

      // if(end > fan){
      //   this.$message.error('该时间段暂不支持，暂支持 2019-8-21 到 2021-8-19');
      //   return;
      // }
      // if(start < wing){
      //   this.$message.error('该时间段暂不支持，暂支持 2019-8-21 到 2021-8-19');
      //   return;
      // }

      /* 律师们都只能理解 2020.05.26 - 2020.05.26 为1天 */
      let dayBetween = (end - start) / (24 * 60 * 60 * 1000) + 1;
      row.days = dayBetween;
    },
    sum() {
      let duration = this.form.duration;
      let arrears = this.form.amount_of_arrears;
      if (!duration[0] || !duration[1]) return;

      // if(!this.form.amount_of_arrears) return;

      if (arrears == undefined) {
        this.$notify.error({
          title: '错误',
          message: '请输入正确的欠款数额'
        });
        return;
      }

      if(!Util.isNumber(arrears + "")) {
        this.$notify.error({
          title: '错误',
          message: '请输入正确的欠款数额'
        });
        return;
      }

      let postJson = {
        day_start: duration[0],
        day_end: duration[1],
        amount_of_arrears: this.form.amount_of_arrears
      }

      API.computeInterbankOffered(postJson)
          .then((response) => {
            this.result = response.data;
          }).catch((error) => {
        console.log(error);
      });
    }
  }
}
</script>